import React from 'react';
import { Row,Col,Button,Tooltip,Icon,Menu,Dropdown,message,} from 'antd';
import FormProerty from '../../containers/components.property/formProperty';
import { PropertyFormElementFormFieldsRule,PropertyFormElementFormFields,PropertyFormGroupGlobalFormFields } from '../../models/form/propertyFormElement';
import FormBasePropertyConfig from '../property.config/formBasePropertyConfig';
import { ComponentType } from '../../stores/projectFormProperty';
import { validationRuleReg,FORM_PROPS,SELECTOPTIONSVALUE,EVENTDATA, FORMSUBMITPROPERTY, FORM_PROPERTY_DIFF_SET } from '../../constants/consts';
import { HlLabeledValue } from 'legions-lunar/model';
import { FormElementvalidatorCode,FormElementvalidatorRegCode,FORMSELECTTRANSFORM,FORMSELECTPRAMS,FORMSELECTTOKEN,INPUT_ADDON_AFTER_BUTTON,FORM_ELEMENT_UPLOAD_VALIDATOR_CODE,DATE_DISABLED_DATE_FUNC_CODE } from '../../constants/code/formConfigCode';
import { PropertyKeyValueFormFields,PropertyKeyValueFormFieldsRule } from '../../models/form/propertyFormModel';
import { QuestionTooltip } from '../questionTooltip/questionTooltip';
import get from 'lodash/get'
import set from 'lodash/set'
import has from 'lodash/has'

import { runInAction } from 'mobx'
import FormPropertyInputConfig from './formPropertyInputConfig';
import FormPropertyCommonConfig from './formPropertyCommonConfig';
import FormPropertySelectConfig from './formPropertySelectConfig';
import FormPropertyUploadConfig from './formPropertyUploadConfig';
import FormPropertySwitchConfig from './formPropertySwitchConfig';
import FormPropertyRadioButtonConfig from './formPropertyRadioButtonConfig';
import { fullProvider,lazyInject,inject } from 'legions-control-container';
import AddSelectOptions from '../../containers/components.widget/addSelectOptions';
import { LegionsProForm } from 'legions-pro-design';
const Question = (lable: string,title: string | React.ReactNode) => {
    return (<QuestionTooltip label={lable} title={title}></QuestionTooltip>)
}
interface ISelectionOptions{
    id: string,
    labelKey: string;
    labelValue: string;
    label?: string
}
@fullProvider(FormPropertyConfig)
export default abstract class FormPropertyConfig {
    public instance: FormProerty
    public addSelectValueInstance
    public AddSelectOptionsInstance: AddSelectOptions
    public field = ['paramsRenders','apiUrl','method']
    @lazyInject(FormBasePropertyConfig)
    public formBasePropertyConfig!: FormBasePropertyConfig

    @lazyInject(FormPropertyInputConfig)
    public propertyInputConfig!: FormPropertyInputConfig

    @lazyInject(FormPropertyCommonConfig)
    public propertyCommonConfig!: FormPropertyCommonConfig

    @lazyInject(FormPropertySelectConfig)
    public propertySelectConfig!: FormPropertySelectConfig

    @lazyInject(FormPropertyUploadConfig)
    public propertyUploadConfig!: FormPropertyUploadConfig

    @lazyInject(FormPropertySwitchConfig)
    public propertySwitchConfig!: FormPropertySwitchConfig

    @lazyInject(FormPropertyRadioButtonConfig)
    public propertyRadioButtonConfig!: FormPropertyRadioButtonConfig

    public registerInstance(Instance: FormProerty) {
        this.instance = Instance
    }
    public registerAddSelectOptionsInstance(Instance: AddSelectOptions) {
        this.AddSelectOptionsInstance = Instance;
    }
    /** 选择器 选项添加表单配置 */
    createAddSelectOptionsConfig() {
        const formUtils = this.formBasePropertyConfig.createFormUtils();
        const rules =AddSelectOptions.SelectOptionsFields.initFormRules<InstanceType<typeof AddSelectOptions.SelectOptionsFields>,{}>(AddSelectOptions.SelectOptionsFields,this.AddSelectOptionsInstance)
        formUtils.renderInputConfig({
            iAntdProps: formUtils.createAntdProps('labelKey',1),
            iFormProps: {
                ...formUtils.createLayout(' ',2,2 * 9),
                colon: false,
            },
            rules: rules.labelKey,
        });
        formUtils.renderInputConfig({
            iAntdProps: formUtils.createAntdProps('labelValue',1),
            iFormProps: {
                ...formUtils.createLayout(' ',2,2 * 9),
                colon: false,
            },
            rules: rules.labelValue,
        });
        return [
            formUtils.getFormConfig('labelKey'),
            formUtils.getFormConfig('labelValue'),
        ]
    }
    createGroupConfig() {
        return this.propertyCommonConfig.createGroupConfig()
    }

    createConfig() {
        return this.propertyCommonConfig.createConfig({
            instance: this.instance,
        })
    }

    /** 表单属性设置配置项 */
    createElementConfig() {
        const formPropertyApp = this.instance.props.store.context.formPropertyApp;
        const type: ComponentType = formPropertyApp.propertyFormationVM.editComponentData.type;
        const formUtils = this.formBasePropertyConfig.createFormUtils();
        const compoent = {
            text: this.createInputElementConfig(formUtils),
            select: this.createSelectElementConfig(formUtils),
            date: this.createDatePickerElementConfig(formUtils),
            daterange: this.createRangePickerElementConfig(formUtils),
            switch: this.createSwitchElementConfig(formUtils),
            upload: this.createUploadElementConfig(formUtils),
            radioButton: this.createRadioButtonElementConfig(formUtils),
            radio: this.createRadioElementConfig(formUtils),
        }
        const createElementCommonConfig = this.createElementCommonConfig(formUtils);
        return [...createElementCommonConfig,
            ...compoent.text,
            ...compoent.select,
            ...compoent.date,
            ...compoent.daterange,
            ...compoent.switch,
            ...compoent.upload,
            ...compoent.radioButton,
            ...compoent.radio,
        ]
    }
    /** 表单属性-下拉选择器自动托管属性配置项 */
    createAddSelectOptionsValue(formUtils?: InstanceType<typeof LegionsProForm.ProFormUtils>,) {
        return this.propertyCommonConfig.createAddSelectOptionsValue(formUtils,{
            addSelectValueInstance: this.AddSelectOptionsInstance,
        })
    }
    /**表单属性-单选组合属性配置项  */
    createRadioButtonElementConfig(formUtils: InstanceType<typeof LegionsProForm.ProFormUtils>,) {
        return this.propertyRadioButtonConfig.createRadioButtonElementConfig(formUtils,{
            name: 'radioButtonOptionsValue',
            type:'radioButton',
            instance: this.instance,
        })
    }
    createRadioElementConfig(formUtils: InstanceType<typeof LegionsProForm.ProFormUtils>,) {
        return this.propertyRadioButtonConfig.createRadioButtonElementConfig(formUtils,{
            name: 'radioOptionsValue',
            type:'radio',
            instance: this.instance,
        })
    }
    /** 表单属性-开关属性配置项 */
    createSwitchElementConfig(formUtils: InstanceType<typeof LegionsProForm.ProFormUtils>,) {
        return this.propertySwitchConfig.createSwitchElementConfig(formUtils,{
            instance: this.instance,
        })
    }
    createUploadElementConfig(formUtils: InstanceType<typeof LegionsProForm.ProFormUtils>,) {
        return this.propertyUploadConfig.createUploadElementConfig(formUtils,{
            instance: this.instance,
        })
    }
    createDateCommonElementConfig(formUtils: InstanceType<typeof LegionsProForm.ProFormUtils>,) {
        const formPropertyApp = this.instance.props.store.context.formPropertyApp;
        const rules = this.formBasePropertyConfig.createRulesInstance<PropertyFormElementFormFieldsRule>(PropertyFormElementFormFieldsRule);
        this.formBasePropertyConfig.renderInputConfig(formUtils,{
            name: 'format',
            placeholder: '日期显示格式',
            label: Question('日期格式',<React.Fragment>
                <p>年月日:YYYY-MM-DD</p>
                <p>年月日:YYYY/MM/DD</p>
                <p>年月日:YYYYMMDD</p>
                <p>年月日时分秒:YYYY-MM-DD HH:mm:ss</p>
                <p>年月日时分:YYYY-MM-DD HH:mm</p>
            </React.Fragment>),
            rules: rules.format
        })
        this.formBasePropertyConfig.renderInputConfig(formUtils,{
            name: 'disabledDate',
            label: '不可选日期',
            rules: rules.disabledDate,
            disabled: true,
            addonAfter: (<Button onClick={() => {
                const property = 'disabledDate';
                const propertyType = 'function';
                formPropertyApp.propertyFormationVM.dispatchAction(() => {
                    formPropertyApp.propertyFormationVM.editComponentData.property = property
                    formPropertyApp.propertyFormationVM.editComponentData.propertyType = propertyType
                    formPropertyApp.formPropertyCodeEditModalRef.viewModel.visible = true;
                    formPropertyApp.formPropertyCodeEditModalRef.viewModel.title = '编辑数据转换函数';
                    const item = formPropertyApp.propertyFormationVM.getPropertyValueTemp(property,propertyType)
                    if (!item || item.value === '') {
                        formPropertyApp.propertyFormationVM.updatePropertyValueTemp({
                            value: DATE_DISABLED_DATE_FUNC_CODE,
                            property: property,
                            propertyType: propertyType,
                        })
                    }
                })
            }}>编辑函数</Button>)
        })
        /* this.renderSwitchConfig(formUtils,{
            name:'showTime',
            placeholder:'',
            label:'增加时间选择功能',
            rules:rules.showTime,
        }) */
        return [
            formUtils.getFormConfig('format'),
            formUtils.getFormConfig('disabledDate')
        ]
    }
     /** 表单属性-日期属性配置项 */
    createDatePickerElementConfig(formUtils: InstanceType<typeof LegionsProForm.ProFormUtils>,) {
        return [
            ...this.createDateCommonElementConfig(formUtils)
        ]
    }
     /** 表单属性-日期范围属性配置项 */
    createRangePickerElementConfig(formUtils: InstanceType<typeof LegionsProForm.ProFormUtils>,) {
        return [
            ...this.createDateCommonElementConfig(formUtils),
        ]
    }
    /** 表单属性-下拉选择器属性配置项 */
    createSelectElementConfig(formUtils: InstanceType<typeof LegionsProForm.ProFormUtils>,) {
        return this.propertySelectConfig.createSelectElementConfig(formUtils,{
            instance: this.instance,
        })
    }
    createInputElementConfig(formUtils: InstanceType<typeof LegionsProForm.ProFormUtils>) {
        return this.propertyInputConfig.createInputElementConfig(formUtils,{
            instance: this.instance,
        })
    }
    /** 表单属性-所有表单元素组件公共的属性配置项 */
    createElementCommonConfig(formUtils:InstanceType<typeof LegionsProForm.ProFormUtils>) {
        const formPropertyApp = this.instance.props.store.context.formPropertyApp;
        const projectCommonApp = this.instance.props.store.context.projectCommonApp;
        const rules = this.formBasePropertyConfig.createRulesInstance<PropertyFormElementFormFieldsRule>(PropertyFormElementFormFieldsRule,{ that: this.instance,store: this.instance.props.store });
        this.formBasePropertyConfig.renderInputConfig(formUtils,{
            name: 'name',
            label: '组件名称',
            rules: rules.name,
            placeholder: '只能填入英文字符',
        })
        this.formBasePropertyConfig.renderInputConfig(formUtils,{
            name: 'label',
            label: 'label名称',
            rules: rules.label,
        })
        this.formBasePropertyConfig.renderInputConfig(formUtils,{
            name: 'labelCol',
            placeholder: 'label宽度,最大24',
            label: 'label宽度',
            rules: rules.labelCol,
            type: 'number',
        })
        this.formBasePropertyConfig.renderInputConfig(formUtils,{
            name: 'wrapperCol',
            placeholder: '组件宽度,最大24',
            label: '组件宽度',
            rules: rules.wrapperCol,
            type: 'number',
        })
        this.formBasePropertyConfig.renderInputConfig(formUtils,{
            name: 'containerSpan',
            placeholder: '容器宽度,最大24',
            label: '容器宽度',
            rules: rules.containerSpan,
            type: 'number',
        })
        this.formBasePropertyConfig.renderInputConfig(formUtils,{
            name: 'placeholder',
            placeholder: '占位提示的文案',
            label: '占位提示',
            rules: rules.placeholder,
            type: 'text',
        })
        formUtils.renderSelectConfig({
            iAntdProps: formUtils.createAntdProps('subGroup',null,'请选择分组'),
            iFormProps: {
                ...formUtils.createLayout('所属分组',this.formBasePropertyConfig.span.labelSpan,this.formBasePropertyConfig.span.wrapSpan),
                //@ts-ignore
                options: formPropertyApp.propertyFormationVM.group.map((item) => {
                    return { key: item.id,value: item.name as string }
                }),
            },
            rules: rules.subGroup,
        })
        this.formBasePropertyConfig.renderSwitchConfig(formUtils,{
            name: 'isDisabled',
            label: '禁用',
            rules: rules.isDisabled
        })
        this.formBasePropertyConfig.renderSwitchConfig(formUtils,{
            name: 'isRequired',
            label: '必填',
            rules: rules.isRequired
        })
        this.formBasePropertyConfig.renderSwitchConfig(formUtils,{
            name: 'visible',
            label: '默认显示/隐藏',
            rules: rules.isRequired
        })
        formUtils.renderSelectConfig({
            iAntdProps: formUtils.createAntdProps('validationRuleReg',null,'请选择验证规则方式'),
            iFormProps: {
                ...formUtils.createLayout('验证规则',this.formBasePropertyConfig.span.labelSpan,this.formBasePropertyConfig.span.wrapSpan),
                options: validationRuleReg,
                labelInValue: true,
                onChange: (value: HlLabeledValue,newValue) => {
                    if (!value) {
                        return;
                    }
                    const property = 'validationRuleReg';
                    runInAction(() => {
                        formPropertyApp.propertyFormationVM.editComponentData.property = property
                    })
                    const updateData = (options: { propertyType: 'expression' | 'function' | null; title: string; code: string }) => {
                        if (formPropertyApp.propertyFormationVM) {
                            formPropertyApp.propertyFormationVM.dispatchAction(() => {
                                formPropertyApp.formPropertyCodeEditModalRef.viewModel.visible = true;
                                formPropertyApp.formPropertyCodeEditModalRef.viewModel.title = options.title;
                                const item = formPropertyApp.propertyFormationVM.getPropertyValueTemp(property,options.propertyType)
                                if (!item || item.value === '') {
                                    formPropertyApp.propertyFormationVM.updatePropertyValueTemp({
                                        value: options.code,
                                        property: property,
                                        propertyType: options.propertyType,
                                    })
                                }
                            })
                        }

                    }

                    if (value.key === '2') {
                        updateData({ propertyType: 'expression',title: '添加验证规则表达式',code: FormElementvalidatorRegCode })
                    }
                    else if (value.key === '3') {
                        const type = formPropertyApp.propertyFormationVM.editComponentData.type
                        const typeCode = {
                            upload: FORM_ELEMENT_UPLOAD_VALIDATOR_CODE,
                        }
                        updateData({ propertyType: 'function',title: '添加自定义验证方法',code: typeCode[type] || FormElementvalidatorCode })
                    } else {
                        if (typeof newValue === 'object'&&!Array.isArray(newValue)) {
                            updateData({ propertyType: 'expression',title: '手机号验证表达式',code: (`${newValue.extendedField}`) })
                        }
                    }
                }
            },
            rules: rules.validationRuleReg,
        })
        const eventList=this.formBasePropertyConfig.createExecCodeConfig(formUtils,{
            name: 'eventList',
            label: '添加事件',
            btnText: '查看事件',
            rules: rules.eventList,
            visible:true,
            options: EVENTDATA[formPropertyApp.propertyFormationVM.editComponentData.type],
            onChange: (value: HlLabeledValue,newValue:HlLabeledValue) => {
                if (!value) {
                    return;
                }
                // @ts-ignore
                const values = value as HlLabeledValue;
                let code = newValue.extendedField
                const model = formPropertyApp.propertyFormationVM.getPropertyValue(values.label);
                if (model) {
                    code = model.value as string;
                }
                runInAction(() => {
                    formPropertyApp.propertyFormationVM.codeValue = code;
                    projectCommonApp.formAddEventCodeExpressionModalRef.viewModel.visible = true;
                    projectCommonApp.formAddEventCodeExpressionModalRef.viewModel.title = `${values.label}事件`;
                    formPropertyApp.propertyFormationVM.editComponentData.property = values.label
                })
            },
            onSetting: () => {
                projectCommonApp.formAddEventListTableModalRef.viewModel.visible = true;
                projectCommonApp.formAddEventListTableModalRef.viewModel.title = '事件信息';
                formPropertyApp.propertyFormationVM.updateEventData();
            }
        })
        
        return [
            formUtils.getFormConfig('name'),
            formUtils.getFormConfig('label'),
            formUtils.getFormConfig('labelCol'),
            formUtils.getFormConfig('wrapperCol'),
            formUtils.getFormConfig('containerSpan'),
            formUtils.getFormConfig('placeholder'),
            formUtils.getFormConfig('subGroup'),
            formUtils.getFormConfig('isDisabled'),
            formUtils.getFormConfig('isRequired'),
            formUtils.getFormConfig('visible'),
            formUtils.getFormConfig('validationRuleReg'),
            ...eventList,
        ]
    }
}